/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './table.module.css'

/** 公共Table组件 */
export default function Table({ 
    headerList = [], 
    dataList = [], 
    style,
    onRowClick,
    rowClassName,
    loading = false
}) {
    const [hoveredRow, setHoveredRow] = useState(null);

    useEffect(() => {
        return () => {
        }
    }, [])

    const handleRowClick = (row, index) => {
        if (onRowClick) {
            onRowClick(row, index);
        }
    };

    return (
        <div className={styles.tableRoot} style={{ ...style }}>
            {/* 表格容器 */}
            <div className={styles.tableContainer}>
                {/* 表头 */}
                <div className={styles.tableHeader}>
                    {headerList.map((header, index) => (
                        <div 
                            key={index} 
                            className={styles.tableHeaderCell}
                            style={{ width: header.width || 'auto' }}
                        >
                            {header.title}
                        </div>
                    ))}
                </div>

                {/* 表格内容 */}
                <div className={styles.tableBody}>
                    {loading ? (
                        <div className={styles.loadingContainer}>
                            <div className={styles.loadingSpinner}></div>
                        </div>
                    ) : dataList.length === 0 ? (
                        <div className={styles.emptyContainer}>
                            暂无数据
                        </div>
                    ) : (
                        dataList.map((row, rowIndex) => (
                            <div
                                key={rowIndex}
                                className={`${styles.tableRow} ${rowClassName || ''} ${hoveredRow === rowIndex ? styles.tableRowHovered : ''}`}
                                onClick={() => handleRowClick(row, rowIndex)}
                                onMouseEnter={() => setHoveredRow(rowIndex)}
                                onMouseLeave={() => setHoveredRow(null)}
                            >
                                {headerList.map((header, colIndex) => (
                                    <div
                                        key={colIndex}
                                        className={styles.tableCell}
                                        style={{ width: header.width || 'auto' }}
                                    >
                                        {row[header.dataIndex]}
                                    </div>
                                ))}
                            </div>
                        ))
                    )}
                </div>
            </div>
        </div>
    )
}